<template>
  <a-select  v-bind="$attrs" v-model:value="modalValueComp"  :options="options"></a-select>
</template>

<script lang="ts">
import {defineComponent} from "vue";

export default defineComponent({
  name: "ApiSelect"
})
</script>

<script lang="ts" setup>
import {computed, onMounted, ref} from "vue";
interface SelectOptions {
  label: string,
  value: string
}
const props = defineProps<{
  api: () => Promise<SelectOptions[]>;
  value: any
}>()
const emit = defineEmits(['update:value']);

const modalValueComp = computed({
  get:()=> props.value,
  set:(val) => emit('update:value',val)
})
const options = ref<SelectOptions[]>([])
onMounted(async () => {
  options.value = await props.api()
})
</script>
<style scoped>

</style>
